<template>
    <div class="boxs">
        <el-card>
            <span>{{$t("review.projectList")}}</span>
            <el-table border stripe :data="moreArr" style="margin-top: 15px" v-loading="loading">
                <el-table-column label="index" align="center" width="60" type="index" />
                <el-table-column :label="$t('review.appName')" align="center" prop="shortName">
                    <template slot-scope="scope">
                        {{ scope.row.shortName }}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('review.packageName')" align="center" prop="package_name" />
                <el-table-column :label="$t('review.operate')" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain
                            @click="handleEdit(scope.$index, scope.row)">{{$t("review.viewcomment")}}</el-button>
                        <el-button size="mini" type="warning" v-hasRole="['admin', 'middle', 'primary','manage','review']" plain
                            @click="handleDelete(scope.$index, scope.row)">{{$t("review.ManageTemplate")}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size"
                @pagination="getMore" />
        </el-card>

        <el-dialog :title="$t('review.operate')" :visible.sync="dialogVisible" width="500px">
            <div class="dialog-content">
                <div class="item">
                    <div class="title">{{$t('review.NoReply')}}:</div>
                    <el-row type="flex" justify="center">
                        <el-col :span="10">
                            <el-button style="min-width: 150px" type="primary" plain
                                @click="goCommentList(1)">{{$t('review.FourStarsandBelow')}}</el-button></el-col>
                        <el-col :span="10">
                            <el-button style="width: 150px" type="danger" plain
                                @click="goCommentList(2)">{{$t('review.FiveStars')}}</el-button></el-col>
                    </el-row>
                </div>
                <div class="item">
                    <div class="title">{{$t('review.Replied')}}:</div>
                    <el-row type="flex" justify="center">
                        <el-col :span="10">
                            <el-button style="min-width: 150px" type="primary" plain
                                @click="goCommentList(3)">{{$t('review.FourStarsandBelow')}}</el-button></el-col>
                        <el-col :span="10">
                            <el-button style="width: 150px" type="danger" plain
                                @click="goCommentList(4)">{{$t('review.FiveStars')}}</el-button></el-col>
                    </el-row>
                </div>
            </div>
        </el-dialog>
        <el-dialog :title="$t('review.operate')" :visible.sync="admDialogVisible" width="600px">
            <div class="dialog-content">
                <div class="item">
                    <el-row type="flex" justify="center">
                        <el-col :span="8">
                            <el-button style="width: 150px" type="primary" plain
                                @click="toTemplateType">{{$t('review.TemplateType')}}</el-button></el-col>
                        <el-col :span="8">
                            <el-button style="width: 150px" type="success" plain
                                @click="toTemplateManage">{{$t('review.Normaltemplate')}}</el-button></el-col>
                        <el-col :span="8">
                            <el-button style="width: 150px" type="danger" plain
                                @click="toFiveTemplate">{{$t('review.FiveStarTemplate')}}</el-button></el-col>
                    </el-row>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addTests, getTests, upTests, delTests } from "@/api/tests";
import { listPackageData } from "@/api/appComment";
import { getUserInfo, upUserPwd } from "@/api/admin";
export default {
  name: "review",
  data() {
    return {
      queryParams: {
        page: 1,
        size: 10,
      },
      total: 0,
      loading: false,
      addLoading: false,
      moreArr: [],
      dialogVisible: false,
      admDialogVisible: false,
      form: {
        name: "",
        remark: "",
      },
      search: "",
    };
  },
  created() {
    this.getMore();
  },
  methods: {
    async getMore() {
      this.loading = true;
      let { data, total } = await listPackageData(this.queryParams);
      this.loading = false;
      this.moreArr = data;
      this.total = total;
    },
    handleQuery() {
      this.queryParams.page = 1;
      this.getMore();
    },
    async affirm() {
      this.$refs["ruleForm"].validate(async (valid) => {
        if (!valid) return;
        try {
          this.addLoading = true;
          !this.form.id && (await addTests(this.form));
          this.form.id && (await upTests({ ...this.form }));
          this.addLoading = false;
          this.$message.success(this.form.id ? "修改成功！" : "添加成功！");
          this.getMore();
          this.dialogVisible = false;
        } catch (e) {
          this.addLoading = false;
        }
      });
    },

    handleEdit(i, row) {
      this.form = { ...row };
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      this.form = { ...row };
      this.admDialogVisible = true;
    },
    //去评论列表 1=未回复4星以下  2=未回复5星  3=已回复4星 4=已回复5星
    goCommentList(i) {
      this.$router.push({
        path: "/review/commentList",
        query: { index: i, package_name: this.form.package_name },
      });
    },
    //跳转模板类型
    toTemplateType() {
      this.$router.push({
        path: "/review/templateType",
        query: { package_name: this.form.package_name },
      });
    },
    //跳转普通回复模板
    toTemplateManage() {
      this.$router.push({
        path: "/review/templateManage",
        query: { package_name: this.form.package_name },
      });
    },
    //跳转五星回复模板
    toFiveTemplate() {
      this.$router.push({
        path: "/review/fiveTemplate",
        query: { package_name: this.form.package_name },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.boxs {
  padding: 20px;
}
.dialog-content {
  .item {
    margin-bottom: 20px;
  }
  .title {
    font-size: 16px;
    margin-bottom: 20px;
    color: #333;
  }
}
</style>
